@htmlsize:37.5rem;

body {
    min-width: 320px;
    max-width: 750px;
    margin:  auto;

    .header-box {
        // 上下公共样式
        .top,
        .search-box {
            width: 100%;
            height: (44 / @htmlsize);
            background-color: #FF8500; 
        }
        // top
        .top {
            display: flex;
            justify-content: space-between;
            
            .logo,
            .denglu {
                width:(44 / @htmlsize);
                height: (44 / @htmlsize);
                // background-color: green;
                img {
                    display: block;
                    margin: (8 / @htmlsize) auto 0;
                    width:(18 / @htmlsize);
                    height: (28 / @htmlsize);
                }
            }
        }
        // search
        .search-box {
            padding: (7 / @htmlsize) (12 / @htmlsize);
            
            .search {
                
                height: (30 / @htmlsize);
                line-height: (30 / @htmlsize);
                background-color: #fff;
                border-radius: (15 / @htmlsize);
    
                img {
                    display: block;
                    width: (16 / @htmlsize);
                    height: (16 / @htmlsize);
                    line-height: (16 / @htmlsize);
                    margin-left: (12 / @htmlsize);
                }
    
                input {
                    display: block;
                    box-sizing: border-box;
                    line-height: ;
                    font-size:(12 / @htmlsize) ;
                  
                }
            }
        }
    }
    
    // banner部分
    .banner {
        padding-top: 1px;
        height: (160 / @htmlsize);
        background-image: linear-gradient(#ff8500,#fff);
        .tp {
            height: (140/ @htmlsize);
            margin:(10 / @htmlsize);
            background-color:pink ;
            border-radius: 10px;
            background: url(../upload/02.jpg) no-repeat;
            background-size:100% (140/ @htmlsize);
        }
    
    }
    
    // 倒计时部分
    .sjs-box {
        position: relative;
        display: block;
        height:(111/ @htmlsize) ;
        .sjs {
            height: (111/ @htmlsize);
            background-color:pink ;
            border-radius: 10px;
            background: url(../upload/Go.gif) no-repeat;
            background-size:100% (111/ @htmlsize);
        }
        .shangpin {
            position: absolute;
            top: (24 / @htmlsize);
            left: (34 / @htmlsize);
            width: (60 / @htmlsize);
            height: (60 / @htmlsize);
            img {
                width: 100%;
            }
        }

    }
   
    // 购物栏

    .go-box {
        height: (140 / @htmlsize);
        margin: (8 / @htmlsize) (16/ @htmlsize);
        align-items: center;
        text-align: center;
        .diyi1 {
            display: flex;
            
            li {
                flex: 1;
                flex-direction: column;
                align-items: center;
                display: flex;
                a {
                    flex: 1;
                    color: #ccc;   
                    width: (50 / @htmlsize);
                    height: (60 / @htmlsize);
                    .icon {
                        width: (50 / @htmlsize);
                        height: (45 / @htmlsize);
                        img {
                            width: 100%;
                        }
                    }
                    p {
                        font-size: ( 12 / @htmlsize);
                        margin: (5 / @htmlsize) 0;
                    }
                }
               
            }
        }

        .dier2 {
            display: flex;
           
            li {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                a {
                    flex: 1;
                    color: #ccc;   
                    width: (50 / @htmlsize);
                    height: (60 / @htmlsize);
                    .icon {
                        width: (50 / @htmlsize);
                        height: (45 / @htmlsize);
                        img {
                            width: 100%;
                        }
                    }
                    p {
                        font-size: ( 12 / @htmlsize);
                        margin: (5 / @htmlsize) 0;
                    }
                }
               
            }
        }
       
    }
       
    // 省钱卡

    .lim-box {
        margin: (8 / @htmlsize) (12 / @htmlsize);
        display: flex;
        height: (111 / @htmlsize);
        border-radius: (10 / @htmlsize);

        .sqk {
            flex: 2;
            width: (168 / @htmlsize);
            height: (111 / @htmlsize);
            margin-right: (3/ @htmlsize);
            img {
                width: 100%;
            }
        }

        .juan1 {
            flex: 1;
            width: (88 / @htmlsize);
            height: (111 / @htmlsize);
            margin-right: (5 / @htmlsize);
            img {
                width: 100%;
            }
        }

        .juan2 {
            flex: 1;
            width: (88 / @htmlsize);
            height: (111 / @htmlsize);
            img {
                width: 100%;
            }
        }
    }

    // 限时秒杀
    .xs-box {
        height: (386 / @htmlsize);

        .top {
            height:  (155 / @htmlsize);
            border-bottom: 1px solid #ccc;
            margin: 0 (10 / @htmlsize);
            ul {
               height: (155 / @htmlsize);
                display: flex;
                li {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    width: (175 / @htmlsize);
                    height: (155 / @htmlsize);
                    &:first-child {
                        border-right: 1px solid #ccc;
                    }
                    h3 {
                        flex: 1;
                        font-size: (15 / @htmlsize);
                        font-weight: 700;
                        
                    }
                    h4 {
                        flex: 1;
                        font-size: (12 / @htmlsize);
                        font-weight: normal;
                        color: #999;
                    }
                    .icoo {
                        flex: 1;
                        display: flex;
                        width: (175 / @htmlsize);
                        height: (80 / @htmlsize);
                        .pic1 {
                            flex: 1;
                            width: (85 / @htmlsize);
                            height: (65 / @htmlsize);
                            text-align: center;
                            img {
                               width: 100%;
                               height: (65 / @htmlsize);
                            }
                            p {
                                height: (15 / @htmlsize);
                                font-size: (10 / @htmlsize);
                            }
                        }
                        .pic2 {
                            flex: 1;
                            width: (85 / @htmlsize);
                            height: (63 / @htmlsize);
                            text-align: center;
                            img {
                                width: 100%;
                                height: (65 / @htmlsize);

                            }
                            p {
                                height: (15 / @htmlsize);
                                font-size: (10 / @htmlsize);
                            }
                        }
                    }

                }
            }
        }

        
        .xia {
            height:  (155 / @htmlsize);
            border-bottom: 1px solid #ccc;
            margin: 0 (10 / @htmlsize);
            ul {
               height: (155 / @htmlsize);
                display: flex;
                li {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    width: (175 / @htmlsize);
                    height: (155 / @htmlsize);
                  
                    &:first-child {
                        border-right: 1px solid #ccc;
                    }
                    h3 {
                        flex: 1;
                        font-size: (15 / @htmlsize);
                        font-weight: 700;
                        
                    }
                    h4 {
                        flex: 1;
                        font-size: (12 / @htmlsize);
                        font-weight: normal;
                        color: #999;
                    }
                    .icoo {
                        flex: 1;
                        display: flex;
                        width: (175 / @htmlsize);
                        height: (80 / @htmlsize);
                        .pic1 {
                            flex: 1;
                            width: (85 / @htmlsize);
                            height: (80 / @htmlsize);
                            text-align: center;
                            img {
                               width: 100%;
                               height: (65 / @htmlsize);
                            }
                            p {
                                height: (15 / @htmlsize);
                                font-size: (10 / @htmlsize);
                            }
                        }
                        .pic2 {
                            flex: 1;
                            width: (85 / @htmlsize);
                            height: (63 / @htmlsize);
                           text-align: center;
                            img {
                                width: 100%;
                                height: (65 / @htmlsize);

                            }
                            p {
                                height: (15 / @htmlsize);
                                font-size: (10 / @htmlsize);
                            }
                        }
                    }

                }
            }
        }

        .bottom {
            height: (75 / @htmlsize);
        }
       
            
           
        

    }
   
}






